<template>
  <div>
    <van-pull-refresh
      v-model="refreshing"
      @refresh="onRefresh"
      loading-text="网好慢！！！好气！！！"
      success-text="刷新成功"
    >
      <van-list
        v-model="loading"
        :finished="finished"
        finished-text="没有更多了"
        :immediate-check="false"
        @load="onLoad"
      >
        <article-item
          v-for="obj in articleList"
          :key="obj.art_id"
          :obj="obj"
          @click.native="listdetail(obj.art_id)"
        ></article-item>
      </van-list>
    </van-pull-refresh>
  </div>
</template>

<script>
import { articleAPI } from '@/api'
import { Toast } from 'vant'

import ArticleItem from './components/ArticleItem.vue'

export default {
  components: { ArticleItem },
  props: {
    channelId: Number
  },
  data () {
    return {
      articleList: [],
      list: [],
      loading: false,
      finished: false,
      nextTime: new Date(),
      refreshing: false
    }
  },

  async created () {
    this.getArticleFn()
  },
  methods: {
    async getArticleFn () {
      const res = await articleAPI({
        channel_id: this.channelId,
        timestamp: this.nextTime
      })
      console.log(res)
      if (res.data.data.pre_timestamp == null) {
        this.finished = true
      }
      this.articleList = [...this.articleList, ...res.data.data.results]
      this.nextTime = res.data.data.pre_timestamp
      this.loading = false
      // Toast('刷新成功')
      this.refreshing = false
    },
    async onLoad () {
      this.getArticleFn()
    },
    onRefresh () {
      this.articleList = []
      this.nextTime = new Date()
      this.getArticleFn()
      // 重新加载数据
      // 将 loading 设置为 true，表示处于加载状态
      this.refreshing = true
      setTimeout(() => {
        Toast.success('刷新成功')
      }, 200)
    },
    listdetail (art_id) {
      console.log(1)
      this.$emit('clicklist', art_id)
    }
  }
}
</script>

<style>
.logo {
  width: 100px;
  height: 30px;
}
</style>
